<template>
  <div class="lang-wrap">
    <Breadcrumb :items="['menu.sys-config', 'menu.sys-config.lang']" />
    <div class="lang-content">
      <div class="content-left">
        <div class="single-searchBox">
          <span
            style="display: inline-block; margin-right: 12px; font-weight: bold"
            >语言配置</span
          >
          <a-input
            size="medium"
            maxlength="50"
            class="single-searchBox-item"
            clearable
            :style="{ width: '200px' }"
            :placeholder="LANG.NAME_OR_CODE"
          ></a-input>
          <a-button type="primary" size="medium" style="margin-left: 8px">
            {{ LANG.LANG_CHOOSE }}
          </a-button>
          <a-button
            size="medium"
            type="primary"
            icon="a-icon-plus"
            style="margin-left: 8px"
            @click="addModule"
          >
            {{ LANG.ADD_MODULE }}
          </a-button>
        </div>
        <div class="table-wrap">
          <a-table
            :data="ModuleLangs"
            stripe
            :pagination="pagination"
            :scroll="{ x: '100%', y: '100%' }"
            @page-change="pageChange"
            @page-size-change="pageSizeChange"
          >
            <template #columns>
              <a-table-column title="#">
                <template #cell="{ rowIndex }">
                  {{
                    pagination.pageSize * (pagination.current - 1) +
                    (rowIndex + 1)
                  }}
                </template>
              </a-table-column>
              <a-table-column :title="LANG.PLACEHOLDER_TRE">
                <template #cell="{ record }">
                  <span
                    style="color: blue; cursor: pointer"
                    @click="currentModule = record"
                    >{{ record.code }}</span
                  >
                </template>
              </a-table-column>
              <a-table-column
                :title="LANG.PLACEHOLDER_TWO"
                data-index="name"
              ></a-table-column>
              <a-table-column :title="LANG.PLACEHOLDER_TWO">
                <template #cell="{ record }">
                  <a-button type="outline" size="small" @click="editRow(record)"
                    >编辑</a-button
                  >
                  <a-button
                    type="outline"
                    status="danger"
                    style="margin-left: 4px"
                    size="small"
                    @click="deleteRow(record)"
                    >删除</a-button
                  >
                </template>
              </a-table-column>
            </template>
          </a-table>
        </div>
      </div>
      <div class="content-right">
        <ModuleLangDetail
          :lang="LANG"
          :lang-module="currentModule"
        ></ModuleLangDetail>
      </div>
      <LangModuleDialog
        v-model:visible="langEditorDialogVisible"
        :op-type="opType"
        :lang="LANG"
        :current-module="currentModule"
        @add="getModuleList"
        @edit="getModuleList"
      ></LangModuleDialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { getLang } from '@/hooks/lang';
  import { onMounted, reactive, ref } from 'vue';
  import { Pagination } from '@/types/global';
  import { ModuleName } from './lang-config';
  import { getModuleLangs } from './api';
  import ModuleLangDetail from './module-lang-detail/index.vue';
  import LangModuleDialog from './lang-module-dialog/index.vue';

  const LANG = getLang(ModuleName);

  const basePagination: Pagination = {
    current: 1,
    pageSize: 20,
  };

  const pagination = reactive({
    ...basePagination,
  });

  // 分页获取所有模块的语言配置列表
  const ModuleLangs = ref<object[]>([]);
  const currentModule = ref({});
  const getModuleList = (): void => {
    const params = {
      name: '',
      page: pagination.current,
      size: pagination.pageSize,
      sort: '',
      sortValue: '',
    };
    getModuleLangs(params).then((res) => {
      ModuleLangs.value = res.data.list || [];
      pagination.total = res.data.total || 10;
      if (res.data.list.length) {
        currentModule.value = res.data.list[0] || {};
      }
    });
  };

  const langEditorDialogVisible = ref(false);
  const opType = ref(0);

  const addModule = () => {
    opType.value = 0;
    langEditorDialogVisible.value = true;
  };
  const editRow = (row: object): void => {
    currentModule.value = row;
    opType.value = 1;
    langEditorDialogVisible.value = true;
  };
  const deleteRow = (row: object): void => {
    currentModule.value = row;
  };
  const pageSizeChange = (size: number): void => {
    pagination.pageSize = size;
    getModuleList();
  };
  const pageChange = (current: number): void => {
    pagination.current = current;
    getModuleList();
  };
  onMounted(() => {
    getModuleList();
  });
</script>

<style scoped lang="less">
  ::v-deep .single-searchBox-item {
    width: 40%;
  }

  .lang-wrap {
    //height: 10000px;
    padding: 0 20px 20px;
  }

  .lang-content {
    display: flex;
    height: calc(100vh - 130px);
    background-color: var(--color-bg-2);
    border-radius: 4px;
    //border: 1px solid red;
    .single-searchBox {
      padding: 10px;
    }

    .content-left {
      width: 50%;
      //border: 1px solid red;
      .table-wrap {
        padding: 10px;
        height: calc(100% - 40px);
        //border: 1px solid black;
      }
    }

    .content-right {
      flex: 1;
      //border: 1px solid red;
    }
  }
</style>
